<template>
  <Wrapper>
    <card-form
      v-model="formData"
      label-width="120"
      class="card-form"
    >
      <el-row :gutter="50">
        <col-wrapper label="水印内容">
          <el-input v-model="formData.text" />
        </col-wrapper>
        <col-wrapper label="宽">
          <el-input-number v-model="formData.width" />
        </col-wrapper>
        <col-wrapper label="高">
          <el-input-number v-model="formData.height" />
        </col-wrapper>
      </el-row>

      <el-row :gutter="50">
        <col-wrapper label="自动添加">
          <el-switch v-model="formData.auto" />
        </col-wrapper>
        <col-wrapper label="添加图片">
          <el-switch
            v-model="formData.image"
            :inactive-value="null"
            :active-value="'https://element-plus.org/images/element-plus-logo.svg'"
          />
        </col-wrapper>
        <col-wrapper label="全屏水印">
          <el-switch v-model="formData.fullscreen" />
        </col-wrapper>
      </el-row>

      <el-row :gutter="50">
        <col-wrapper label="旋转角度">
          <el-slider
            v-model="formData.rotate"
            :min="-180"
            :max="180"
          />
        </col-wrapper>
        <col-wrapper label="字体大小">
          <el-slider
            v-model="formData.fontSize"
            :min="10"
            :max="40"
          />
        </col-wrapper>
        <col-wrapper label="层级">
          <el-slider v-model="formData.zIndex" />
        </col-wrapper>
      </el-row>

      <el-row :gutter="50">
        <col-wrapper label="水印颜色">
          <el-color-picker v-model="formData.color" />
        </col-wrapper>
        <col-wrapper label="字体粗细">
          <el-select v-model="formData.fontWeight">
            <el-option
              label="normal"
              value="normal"
            />
            <el-option
              label="weight"
              value="weight"
            />
            <el-option
              label="light"
              value="light"
            />
            <el-option
              label="number"
              value="number"
            />
          </el-select>
        </col-wrapper>
      </el-row>

      <el-row :gutter="50">
        <col-wrapper label="水印之间的间距">
          <el-space>
            <el-input-number
              v-model="formData.gap[0]"
              controls-position="right"
            />
            <el-input-number
              v-model="formData.gap[1]"
              controls-position="right"
            />
          </el-space>
        </col-wrapper>
        <col-wrapper label="偏移量">
          <el-space>
            <el-input-number
              v-model="formData.offset[0]"
              placeholder="offsetLeft"
              controls-position="right"
            />
            <el-input-number
              v-model="formData.offset[1]"
              placeholder="offsetTop"
              controls-position="right"
            />
          </el-space>
        </col-wrapper>
      </el-row>

      <template #content>
        <el-space wrap>
          <el-button @click="renderWatermark">手动创建水印</el-button>
          <el-button
            type="warning"
            @click="clearWatermark"
          >清除水印</el-button>
        </el-space>
      </template>
    </card-form>
    <watermark
      ref="watermarkRef"
      :content="formData.text"
      :fullscreen="formData.fullscreen"
      :auto="formData.auto"
      :image="formData.image"
      :z-index="formData.zIndex"
      :rotate="formData.rotate"
      :color="formData.color"
      :font-size="formData.fontSize"
      :font-weight="formData.fontWeight"
      :gap="formData.gap"
      :offset="formData.offset"
      :width="formData.width"
      :height="formData.height"
    >
      <el-card
        shadow="never"
        class="card-box"
        style="width: 100%; height: 350px"
      >
      </el-card>
    </watermark>
  </Wrapper>
</template>

<script setup>
import CardForm from '@/components/wrapper/card-form'
import ColWrapper from '@/components/wrapper/col'
import Watermark from '@/components/watermark'

const watermarkRef = ref(null)
const formData = ref({
  text: '水印内容',
  fontWeight: 'normal',
  fullscreen: false,
  auto: true,
  image: null,
  zIndex: 19,
  rotate: -22,
  fontSize: 16,
  gap: [70, 40],
  offset: [1, 2],
  width: 130,
  height: 30,
  color: 'rgba(0, 0, 0, 0.15)',
})

function clearWatermark() {
  watermarkRef.value.clear()
}

function renderWatermark() {
  watermarkRef.value.renderWatermark()
}
</script>

<style lang="scss" scoped>
.card-form {
  height: 100%;
}
</style>
